<!-- 团队分组 -->
<template>
  <div class='grouping'>
    <div class="warp">
      <div class="warp_label">团队分组：</div>
      <ul class="grouping_warp">
        <li class="grouping_item" v-for="(item,index) in groupList" :key="index">
          <div class="label">{{item.groupName}}</div>
          <div class="grouping_item_right">
            <i class="label_border"></i>
            <span class="chenck_btn" @click="groupChenck(item)"
              v-if="unlocking('0102030101')">查看</span>
            <span class="edit_btn" @click="groupEdit(item)"
              v-if="unlocking('0102030101')">编辑</span>
            <span class="del_btn" @click="groupDel(item)"
              v-if="unlocking('0102030102')">删除</span>
          </div>
        </li>
      </ul>
      <div class="add_btn">
        <Button type="primary" icon="md-add-circle" @click="addGrouping"
          v-if="unlocking('0102030100')">增加一个分组</Button>
      </div>
    </div>
    <Modal v-model="AddModal" :title="Modaltitle" class="addModel" @on-cancel="modalCancel"
      :width="flag ==1?'500px':'1000px'">
      <!-- 新增分组 -->
      <Form ref="AddDate" :model="AddDate" :rules="ruleAddDate" :label-width="100">
        <FormItem label="分组名称：" prop="groupName" v-show="flag !=2">
          <div class="groupName_warp">
            <Input v-model="AddDate.groupName" placeholder="请输入分组名称" maxlength="10"
              class="group_name" />
            <Button type="primary" v-if="flag !=1" class="groupName_btn"
              @click="modalOk('AddDate')">确定</Button>
          </div>
        </FormItem>
        <FormItem label="分组组员" v-if="flag !=1">
          <div>{{titleNumber}}</div>
        </FormItem>
      </Form>
      <Table ref="TableHeight" :max-height="300" :columns="flag ==3?columns:columnsCheck"
        :data="data" v-if="flag !=1" border></Table>
      <div slot="footer" v-if="flag !=2">
        <Button @click="modalCancel">关闭</Button>
        <Button type="primary" v-if="flag !=3" @click="modalOk('AddDate')">确定</Button>
      </div>
      <div slot="footer" v-else>
        <Button @click="modalCancel">关闭</Button>
      </div>
      <edit-modal ref="editModal" @success='onSuccess' />
    </Modal>
    <change-log ref="changeLog" @success='onSuccess'></change-log>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import groupingColumns from './opt/groupingColumns.js'
  import changeLog from './changeLog'
  import editModal from './editModel.vue'
  export default {
    components: { changeLog, editModal },
    data() {
      return {
        Modaltitle: '新增分组',
        AddModal: false,
        groupingContent: '',
        AddDate: {
          groupName: '',
          groupId: '',
        },
        ruleAddDate: {
          groupName: [
            { required: true, message: '请输入分组名称', trigger: 'blur' },
          ],
        },
        groupList: [],
        flag: 1, //1:新增  2.查看  3.编辑
        columns: groupingColumns.groupEditColumns, //编辑分组人员
        columnsCheck: groupingColumns.groupCheckColumns,
        data: [],
        titleNumber: '',
        userMess: this.$dt.userInfo(),
        buildingId: this.$dt.buildInfo().housesId,
        teamId: this.$dt.session.get("teamsId"),
        IsLeader: false
      }
    },
    methods: {
      //获取分组列表
      getGroupinit(id = '') {
        let params = {
          teamId: this.teamId,
          groupId: id,
        }
        teamsApi.queryAllTeamGroup(params).then((res) => {
          if (!id) {
            this.groupList = res
          } else {
            this.data = res[0].baseUsers
            this.IsLeader = res[0].baseUsers.some((item) => {
              return item.groupLeader == 1
            })
            this.titleNumber = `（共${res[0].baseUsers.length}人${
            this.IsLeader ? ',1名组长' : ''
          }）`
          }
        })
      },
      //新增分组
      addGrouping() {
        console.log('新增分组')
        this.Modaltitle = '新增分组'
        this.AddModal = true
        this.flag = 1
      },
      //查看
      groupChenck(obj) {
        this.AddModal = true
        this.Modaltitle = obj.groupName
        this.AddDate.groupName = obj.groupName
        this.AddDate.groupId = obj.groupId
        this.flag = 2
        this.getGroupinit(obj.groupId)
      },
      //编辑
      groupEdit(obj) {
        console.log(obj, '分组数据')
        this.AddModal = true
        this.Modaltitle = '编辑分组'
        this.AddDate.groupName = obj.groupName
        this.AddDate.groupId = obj.groupId
        this.flag = 3
        this.getGroupinit(obj.groupId)
      },
      //删除
      groupDel(obj) {
        console.log(obj.groupId, '分组Id')
        let that = this
        this.$Modal.confirm({
          title: '删除分组',
          content: `是否确认删除“${obj.groupName}”？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            let params = {
              createId: this.userMess.userId,
              groupId: obj.groupId,
              groupName: obj.groupName,
              teamId: this.teamId,
              updateId: this.userMess.userId,
            }
            teamsApi.deleteTeamGroup(params).then((res) => {
              console.log('删除分组', res)
              that.$Message.success('删除成功!')
              that.AddModal = false
              that.getGroupinit()
              this.$emit('onChangeTable')
            })
          }
        })
      },
      //设置组长
      setLeaderFun(obj) {
        console.log(obj, this.IsLeader)
        if (this.IsLeader && obj.groupLeader == 2) {
          return false
        } else {
          let type = obj.groupLeader == 1 ? 'cancel' : 'set'
          obj.groupId = this.AddDate.groupId
          this.$refs.editModal.edit(obj, type)
        }
      },
      //删除分组人员
      delGroupUserFun(obj) {
        obj.groupId = this.AddDate.groupId
        obj.teamId = this.teamId
        this.$refs.editModal.edit(obj, 'remove')
      },
      modalCancel() {
        this.AddModal = false
        this.flag != 2 && this.$refs.AddDate.resetFields()
      },
      modalOk(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.flag == 1) {
              let params = {
                createId: this.userMess.userId,
                groupName: this.AddDate.groupName,
                teamId: this.teamId,
                updateId: this.userMess.userId,
              }
              teamsApi.insertTeamGroup(params).then((res) => {
                this.$Message.success('分组创建成功!')
                this.$refs[name].resetFields()
                this.AddModal = false
                this.getGroupinit()
              })
            } else if (this.flag == 3) {
              let params = {
                groupName: this.AddDate.groupName,
                groupId: this.AddDate.groupId,
              }
              teamsApi.updateTeamGroup(params).then((res) => {
                this.$Message.success('分组修改成功!')
                this.$refs[name].resetFields()
                this.AddModal = false
                this.getGroupinit()
                this.$emit('onChangeTable')
              })
            }
          }
        })
      },
      onChangeLog(data, type) {
        console.log(data, type, '查看、修改变更记录')
        data.teamId = this.teamId
        data.groupId = this.AddDate.groupId
        this.$refs.changeLog.show(data, type)
      },
      onSuccess(data) {
        console.log(data, '设置组长、取消组长、移除小组 ====成功')
        this.getGroupinit(this.AddDate.groupId)
        this.$emit('onChangeTable')
      }
    },
    mounted() {
      this.getGroupinit()
      groupingColumns.sendThis(this)
    },
  }
</script>
<style lang='scss' scoped>
  .grouping {
    .warp {
      display: flex;
      line-height: 32px;
      margin-bottom: 20px;

      .warp_label {
        width: 75px;
        white-space: nowrap;
      }

      .add_btn {
        margin-left: 10px;

        ::v-deep .ivu-btn {
          padding: 0 5px;
        }
      }

      .grouping_warp {
        display: flex;
        overflow: auto;

        .grouping_item {
          border: 1px solid #ccc;
          padding: 5px 0;
          line-height: 22px;
          border-radius: 5px;
          margin-right: 10px;
          display: flex;

          .label {
            padding: 0 5px;
            display: flex;
            white-space: nowrap;
          }

          .grouping_item_right {
            width: 115px;

            .label_border {
              position: relative;
            }

            .label_border::before {
              content: '';
              display: block;
              width: 1px;
              height: 17px;
              background: #ccc;
              position: absolute;
              top: 0px;
              left: -1px;
            }

            span {
              padding: 0 5px;
              cursor: pointer;
              flex: 1;
            }
          }
        }
      }
    }
  }

  ::v-deep .group_name .ivu-input {
    width: 300px;
  }

  .groupName_warp {
    display: flex;

    .ivu-input-wrapper {
      width: auto;
    }

    .groupName_btn {
      margin-left: 15px;
      height: 32px;
      line-height: 32px;
      font-size: 15px;
    }
  }
</style>